<template>
	<div class="modify-dialog">
		<slot> </slot>
		<el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
			<Form v-bind="formOpts" v-on="formEvent">
				<template #formSuf>
					<div class="addition-wrap">
						<div class="addition" v-for="(e, i) in addition" :key="e.id + i">
							<div class="name">{{ e.productName }}</div>
							<el-input-number v-model="e.count" :min="0" :max="100000"></el-input-number>
						</div>
					</div>
				</template>
				<template #formBtn>
					<div class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="onConfirm"> 确 定 </el-button>
					</div>
				</template>
			</Form>
		</el-dialog>
	</div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";

export default {
	mixins: [modifyMixins],
	data () {
		return {
			labelPosition: "left",
			addition: [],
			form: {},
		};
	},
	computed: {
		title () {
			return "杂项录入";
		},
	},
	mounted () { },
	methods: {
		showDialog (modify = "add", row = {}) {
			this.dialogVisible = true;
			this.row = row;
			this.modify = modify || "add";
			for (const key in this.form) {
				if (Object.hasOwnProperty.call(row, key))
					this.form[key].value = row[key] || "";
				else this.form[key].value = "";
			}
			this.formKey = this.$quinn.guid();
			this.$api["materialMaterialAdditionList"]().then((res) => {
				this.addition = (res || []).map((e) => {
					e.count = 0;
					return e;
				});
			});
		},
		onSubmit (form) {
			const { modify, row, addition, fileList2 } = this;
			if (addition.every((e) => !e.count)) return this.$message.error("请输入");
			form.id = row.id;
			form.addition = addition
				.filter((e) => e.count)
				.map((e) => {
					return {
						id: e.id,
						count: e.count,
					};
				});
			this.$api["newOrderUpdate"](form).then(this.submitDoneMsg);
		},
	},
};
</script>

<style lang="less" scoped>
.addition-wrap {
	height: 60vh;
	overflow-y: auto;
	margin: 20px 0;

	.addition {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;

		.name {
			padding-right: 20px;
		}
	}
}
</style>

